<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<table id="user" lay-filter="test"></table>
<!--展示所有-->
<script>
    layui.use(["table","form","laydate","layer"],function () {
        var table = layui.table;
        <!-- var layer = layui.layer;
        var laydate = layui.laydate;
        var form = layui.form;
        var $ = layui.jquery; -->
        table.render({
            elem:"#user",
            cols:[[
                {type:"checkbox"},
                {field:"sectionId",title:"编号",sort:true},
                {field:"sectionName",title:"科室"},
                {field:"sectionMobile",title:"电话"},
                {field:"sectionAddress",title:"地点"},
                {title:"操作",
                    toolbar:"#operation"}
            ]],
            url:"/section/section/sections",
            page:true,
            limits:[5,10,20],
            limit:5,
            toolbar:"#toolbar"
        });
    })
</script>

<!--工具按钮-->
<script type="text/html" id="operation">
    <button class="layui-btn layui-btn-danger" layui-btn-xs lay-event="edit">更新</button>
    <button class="layui-btn layui-btn-normal" layui-btn-xs lay-event="remove">删除</button>
</script>
<!--功能操作区-->
<script type="text/html" id="toolbar">
    <!--删除选中-->
    <button onclick="handleRemoveAny()" class="layui-btn layui-btn-danger layui-btn-xs" type="button">删除选中<i class="layui-icon layui-icon-delete"/> </button>
    <!--添加按钮-->
    <button onclick="openAddForm()" class="layui-btn layui-btn-normal layui-btn-xs">添加<i class="layui-icon layui-icon-addition"></i></button>
    <!--显示搜索框-->
    <div class="layui-inline">
        <form action="" class="layui-form">
            <div class="layui-input-inline">
                <input type="text" name="search" id="search" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <button onclick="handleSearch()" type="button" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-search"> </i></button>
            </div>
        </form>
    </div>
</script>
<!--删除选中-->
<script type="text/javascript">
    function handleRemoveAny() {
        layui.use("table",function () {
            var $ = layui.jquery;
            var table = layui.table;
            var status = table.checkStatus("user");
            status.data;
            var ids = [];
            for (var i = 0; i<status.data.length; i++){
                ids[i] = status.data[i].sectionId;
            }
            $.ajax({
                url:"/section/section/sections",
                data:JSON.stringify(ids),
                type:"delete",
                contentType:"application/json",
                dataType:"json",
                success:function (result) {
                    if (result.msg=="删除成功"){
                        alert(result.msg);
                        table.reload("user");
                    }else {
                        alert(result.msg);
                    }
                }
            })
        })
    }
</script>
<!--添加的弹出层-->
<script id="addForm" type="text/html">
    <form class="layui-form" action="" lay-filter="addForm">
        <div class="layui-form-item">
            <label class="layui-form-label">科室</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" name="sectionName" required  lay-verify="required" placeholder="请输入科室" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" name="sectionMobile" required  lay-verify="required" placeholder="请输入电话" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地点</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" name="sectionAddress" required  lay-verify="required" placeholder="请输入地点" autocomplete="off" class="layui-input">
            </div>
        </div>
        <!-- <div>
            <label class="layui-form-label">地点</label>
            <div class="layui-input-block" style="width:200px">
                <input type="radio" name="sex" id="" value="1" title="男" checked>
                <input type="radio" name="sex" id="" value="0" title="女">
            </div>
        </div> -->
        <!--<div class="layui-form-item">
            <label class="layui-form-label">生日</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" class="layui-input" id="add-birthday" name="birthday">
            </div>
        </div> -->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn " lay-submit lay-filter="add-go">添加</button>
                <button type="button" class="layui-btn " id="add-form-cancel">取消</button>
            </div>
        </div>
    </form>
</script>
<!--添加-->
<script type="text/javascript">
    function openAddForm() {
        layui.use(["table","form","layer","laydate"],function () {
            var layer = layui.layer;
            var table = layui.table;
            var $ = layui.jquery;
            var form = layui.form;
            var laydate = layui.laydate;
            layer.open({
                type:1,
                content:$("#addForm").html(),
                success:function (layerObj,index) {
                    /*form.render("radio","addForm");
                    laydate.render({
                        elem:"#add-birthday",
                        type:"datetime",//控件选择类型 year month date time datetime
                        format:"yyyy-MM-dd HH:mm:ss",//日期格式
                        value:new Date(),//初始值
                        trigger: 'click'//触发方式
                    });*/
                    //监听提交事件
                    form.on("submit(add-go)",function (data) {
                        $.ajax({
                            url:"/section/section/sections",
                            data:JSON.stringify(data.field),
                            type:"post",
                            contentType:"application/json",
                            dataType:"json",
                            success:function(result){
                                if (result.msg == "添加成功") {
                                    layer.close(index);
                                    table.reload("user");
                                }else {
                                    alert(result.msg);
                                }
                            }
                        })
                    })

                },
                area:["400px","300px"]
            });
        })
    }
</script>
<!--搜索-->
<script type="text/javascript">
    function handleSearch() {
        layui.use("table",function () {
            var table = layui.table;
            var $ = layui.jquery;
            table.reload("user",{
                url:"/section/section/sections",
                where:{
                    "search":$("#search").val()
                }
            })
        })
    }
</script>
<!--更新的弹出层-->
<script id="updateForm" type="text/html">
    <form class="layui-form" action="" lay-filter="updateForm">
        <input type="hidden" name="sectionId">
        <div class="layui-form-item">
            <label class="layui-form-label">科室</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" name="sectionName" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" name="sectionMobile" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地点</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" name="sectionAddress" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <!--<div>
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block" style="width:200px">
                <input type="radio" name="sex"  value="1" title="男" checked>
                <input type="radio" name="sex"  value="0" title="女">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">生日</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" class="layui-input" id="update-birthday" name="birthday">
            </div>
        </div>-->
        <div class="layui-form-item">
            <div class="layui-input-block" style="width:200px">
                <button type="submit" class=" layui-btn" lay-submit lay-filter="update-go" style="width:80px">更新</button>
                <button type="button" class=" layui-btn" id="update-form-cancel" style="width:80px">取消</button>
            </div>
        </div>
    </form>
</script>
<!--监听表格的工具按钮事件-->
<script>
    layui.use(["table","form","laydate","layer"],function () {
        var table = layui.table;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var form = layui.form;
        var $ = layui.jquery;
        table.on("tool(test)",function (obj) {
            if(obj.event == "edit"){
                layer.open({
                    type:1,
                    area:["400px","300px"],
                    content:$("#updateForm").html(),
                    success:function (layerObj,index) {
                        /*form.render("radio","updateForm");
                        laydate.render({
                            elem:"#update-birthday",
                            type:"datetime",//控件选择类型 year month date time datetime
                            format:"yyyy-MM-dd HH:mm:ss",//日期格式
                            value:new Date(),//初始值
                            trigger: 'click'//触发方式
                        })*/
                        form.val("updateForm",obj.data);
                        form.on("submit(update-go)",function (data) {
                            console.log(data.field);
                            $.ajax({
                                url:"/section/section/sections/"+data.field.sectionId,
                                type:"put",
                                data:JSON.stringify(data.field),
                                dataType:"json",
                                contentType:"application/json",
                                success:function (result) {
                                    if(result.msg == "更新成功"){
                                        alert(result.msg);
                                        layer.close(index);
                                        table.reload("user");
                                    }else{
                                        alert(result.msg);
                                    }
                                }
                            })
                        })
                    }
                })
            }else if (obj.event == "remove"){
                $.ajax({
                    url:"/section/section/sections/"+obj.data.sectionId,
                    type:"delete",
                    dataType:"json",
                    success:function (result) {
                        if(result.msg =="删除成功"){
                            alert(result.msg);
                            table.reload("user");
                        }else {
                            alert(result.msg);
                        }
                    }
                })
            }
        })
    })
</script>
</body>
</html>